<template>
	<view class="cooperation" :style="{height:height+'px'}">
		<view class="msg">
			点击按钮，贴近手机话筒录制语音介绍，时长为5～60s
		</view>
		<view style="display: flex;justify-content: center">
			<text  class="button">
				{{flag?'点击停止播放':time?time+'s，'+(tempFilePath?'点击开始播放':'再次点击按钮即可停止录制'):'点击开始录音'}}
			</text>
		</view>
		<view style="display: flex;justify-content: center;margin-top: -16upx">
			<image src="../../static/img/downArrow.jpg" style="width: 44upx;height: 44upx"/>
		</view>
		<view class="icon-wrap" @click="start">
			<text class="iconfont" style="margin-top:46upx;font-size:50upx;color: white;">
				{{flag&&tempFilePath?'&#xe62c;':!flag&&tempFilePath?'&#xe64e;':'&#xe66b;'}}</text>
<!--			<image @click="start" class="record"  src="http://n.sinaimg.cn/news/transform/700/w1000h500/20190722/e14c-iaantfi6168637.jpg"/>-->
		</view>
		<view class="msg" @click="re" v-if="tempFilePath&&!flag">
			重新录制
		</view>
		<button type="primary" @click="goBack" :disabled="!tempFilePath||time<5" style="margin-top: 40upx"  class="but">
			保存
		</button>
	</view>
</template>

<script>
	var recorderManager=null
	export default {
		components:{
		},
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight,
				backgroundAudioManager:null,
				flag:false,
				play:false,
				time:0,
				timer:null,
				tempFilePath:null,
				options : {
					duration: 10000,
					sampleRate: 44100,
					numberOfChannels: 1,
					encodeBitRate: 192000,
					format: 'mp3',
					frameSize: 50
				}
			}
		},
		onLoad(){
			recorderManager = uni.getRecorderManager()
			recorderManager.onStop((res)=>{
				this.tempFilePath = res.tempFilePath
				this.backgroundAudioManager.src = this.tempFilePath
				console.log(this.tempFilePath,77777)
			})// 结束录音
			this.backgroundAudioManager = uni.getBackgroundAudioManager()
			this.backgroundAudioManager.title = '语音介绍'
			this.backgroundAudioManager.epname = '语音介绍'
			this.backgroundAudioManager.singer = '微信用户'
			this.backgroundAudioManager.pause()
			// this.backgroundAudioManager.src = this.tempFilePath
			// this.backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
			this.backgroundAudioManager.onCanplay(res=>{
				this.backgroundAudioManager.pause()
				this.backgroundAudioManager.seek(0)
			})
			this.backgroundAudioManager.onEnded(res=>{
				this.backgroundAudioManager.src = this.tempFilePath
				// 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
				this.backgroundAudioManager.pause()
				this.flag=false

			})
		},
		methods:{
			goBack(){
				uni.setStorage({
					key: 'tempFilePath',
					data: this.tempFilePath,
					success: ()=> {
						uni.navigateBack()
						console.log('success');
					}
				});
				//
			},
			re(){
				this.tempFilePath=null
				this.time=0
				this.start()
			},
			start(){
				if(this.tempFilePath){
					this.audioPlay()
					return
				}
				if(this.timer){
					clearTimeout(this.timer)
					this.timer=null
					recorderManager.stop()

				}else{
					recorderManager.start(this.options)
					// recorderManager.onStart(()=>{
					// 	this.tempFilePath = res.tempFilePath
					// 	console.log(this.tempFilePath,565555)
					// })
					this.timer=setInterval(()=>{
						this.time++
						if(this.time==10){
							this.start()
						}
					}, 1000)
				}

			},
			goUrl(){
				uni.navigateTo({
					url: '../index/editCard'
				});
			},
			audio(){
				this.backgroundAudioManager.src = this.tempFilePath
						// 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'

			},
			audioPlay() {
				if(this.flag){
					this.backgroundAudioManager.stop()
					this.backgroundAudioManager.src = this.tempFilePath
					// this.backgroundAudioManager.seek(this.time)
					this.flag=false
				}else{
					if(this.time<5){
						uni.showToast({
							title: '时长小于5s',
							icon: 'none'
						})
						return
					}
					this.backgroundAudioManager.play()
					this.flag=true
				}
			},
		}
	}
</script>

<style scoped>
	.cooperation{
		/*background: #F9F9F9;*/
	}
	.msg{
		color: rgba(10, 188, 100, 1);
		padding-top: 40upx;
		font-size: 26upx;
		text-align: center;
		font-family: PingFangSC-regular;
	}
	.button{
		margin-top: 100upx;
		line-height: 60upx;
		/*width: 50upx;*/
		padding: 0 30upx;
		border-radius: 242upx;
		color: rgba(16, 16, 16, 1);
		text-align: center;
		font-size: 32upx;
		font-family: -apple-system;
		border: 2upx solid rgba(10, 188, 100, 1);
		background: #E0FBED;
		color: #0ABC64
	}
	.icon-wrap{
		display: flex;
		justify-content: center;
		background: #0ABC64;
		margin-left: calc(50% - 79upx);
		width: 148upx;
		height: 148upx;
		border-radius: 148upx;
		margin-top: 14upx;
	}
	.record{
		width: 148upx;
		height: 148upx;
	}
	.but{
		width: 90%;
		margin-left: 5%;
		height: 84upx;
		border-radius: 242upx;
		color: white;
		background-color: rgba(10, 188, 100, 1);
		font-size: 32upx;
		font-family: -apple-system;
		position: absolute;
		bottom: 40upx;
	}
</style>
